<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../styles/reset.css">
    <link rel="stylesheet" href="../styles/index-header.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../styles/detail.css">
    <script src="../js/detail.js" type="module"></script>
</head>

<body>
    <div class="header">
        <div class="topnav">
            <div class="containter clearfix">
                <p class="fl">
                    <a href="./index.html">
                        <i class="iconfont">&#xe8b9;</i>
                        天猫首页
                    </a>
                    <em>
                        <span>喵</span>，欢迎来天猫</em>
                    <a class="p-login" href="./login.html">请登录</a>
                    <a href="./register.html">免费注册</a>
                </p>

                <ul class="fr">
                    <li class="item-b">
                        <a href="javascript:;">我的淘宝
                            <b></b>
                        </a>
                        <div class="sub1">
                            <a href="javascript:;">已买到的宝贝</a>
                            <a href="javascript:;">已卖出的宝贝</a>
                        </div>
                    </li>
                    <li>
                        <a href="./shopCar.html">
                            <i class="iconfont icon-gouwuche
                            "></i>购物车
                        </a>
                    </li>
                    <li class="item-b">
                        <a href="javascript:;">收藏夹
                            <b></b>
                        </a>
                        <div class="sub1 sub2">
                            <a href="javascript:;">收藏的宝贝</a>
                            <a href="javascript:;">收藏的店铺</a>

                        </div>
                    </li>
                    <li class="line"></li>
                    <li class="phone">
                        <a href="javascript:;">
                            <i class="iconfont icon-shouji"></i>手机版
                        </a>
                        <div class="sub-img">
                            <img src="../img/qrcode.png" alt="">
                            <img src="../img/qrcode2.jpg" alt="">
                            <b></b>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;">淘宝网</a>
                    </li>
                    <li class="item-b">
                        <a href="javascript:;">商家支持
                            <b></b>
                        </a>
                        <div class="sub1 sub3">
                            <ul>
                                <li>
                                    <h3>商家</h3>
                                    <a href="javascript:;" class="itema">商家中心</a>
                                    <a href="javascript:;">天猫规则</a>
                                    <a href="javascript:;" class="itema">商家入驻</a>
                                    <a href="javascript:;">运营服务</a>
                                    <a href="javascript:;" class="itema">商家品控</a>
                                    <a href="javascript:;">商家工具</a>
                                    <a href="javascript:;" class="itema">天猫智库</a>
                                    <a href="javascript:;">喵言喵语</a>
                                </li>
                                <li>
                                    <h3>帮助</h3>
                                    <div>
                                        <a href="javascript:;">商家服务大厅</a>
                                    </div>
                                    <div>
                                        <a href="javascript:;">问商友</a>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </li>
                    <li class="item-b site">
                        <div class="item">
                            <i class="iconfont icon-wangzhandaohang
                            "></i>
                            网站导航
                            <b></b>
                        </div>
                        <div class="sub1 sub4 clearfix">
                            <dl class="part1">
                                <dt>热点推荐Hot</dt>
                                <dd>
                                    <a href="javascript:;">天猫超市</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">喵鲜生</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">科技新品
                                        <i class="nav-icon new"></i>
                                    </a>

                                </dd>
                                <dd>
                                    <a href="javascript:;">女装新品
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">酷玩街</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">内衣新品
                                        <i class="nav-icon new"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">试美妆
                                        <i class="nav-icon"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">运动新品</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">时尚先生
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">精明妈咪
                                        <i class="nav-icon new"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">吃乐会</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">企业采购</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">会员积分</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">天猫国际</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">品质频道
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="part2">
                                <dt>行业市场Market</dt>
                                <dd>
                                    <a href="javascript:;">美妆
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">电器</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">女装</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">男装</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">女鞋
                                        <i class="nav-icon new"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">男鞋</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">内衣</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">箱包
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">运动</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">母婴
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">家装</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">医药
                                        <i class="nav-icon hot"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">食品
                                        <i class="nav-icon new"></i>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">配饰</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">汽车</a>
                                </dd>
                            </dl>
                            <dl class="part3">
                                <dt>服务指南Help</dt>
                                <dd>
                                    <a href="javascript:;">帮助中心</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">品质保障</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">特色服务</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">7天退换货</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="h-detail">
            <div class="containter clearfix">
                <div class="logo">
                    <img src="../img/shop/shop-logo.png" alt="">
                </div>
                <div class="info">
                    <div class="info-left">
                        <h4>冠琴皓林专卖店</h4>
                        <span></span>
                    </div>

                    <div class="comment">
                        <div>
                            <p>描 述</p>
                            <span>4.9</span>
                            <i class="iconfont">&#xe60f;</i>
                        </div>
                        <div>
                            <p>服 务</p>
                            <span>4.9</span>
                            <i class="iconfont">&#xe60f;</i>
                        </div>
                        <div>
                            <p>物 流</p>
                            <span>4.9</span>
                            <i class="iconfont">&#xe60f;</i>
                        </div>
                        <a class="slogo-triangle">
                            <i></i>
                        </a>
                    </div>
                </div>
                <div class="shop-qrcode">
                    <div>
                        <div>手机逛</div>
                        <i class="iconfont">&#xe63a;</i>
                    </div>
                    <a class="slogo-triangle">
                        <i></i>
                    </a>
                </div>
                <div class="seach fl">
                    <form action="get" class="fr">
                        <input type="text" placeholder="搜索 天猫 商品/品牌/店铺">
                        <button>搜天猫</button>
                        <button class="btn1">搜本店</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="banner">
        <div class="b-top">
            <div class="t-img">
            </div>
            <div class="t-a">
                <a href="javascript:;"></a>
                <a href="javascript:;" style="left: 190px;"></a>
                <a href="javascript:;" style="left: 285px;"></a>
                <a href="javascript:;" style="left: 395px;"></a>
                <a href="javascript:;" style="left: 515px;"></a>
                <a href="javascript:;" style="left: 635px;"></a>
                <a href="javascript:;" style="left: 745px;"></a>
                <a href="javascript:;" style="left: 865px;"></a>
                <a href="javascript:;" style="left: 975px;"></a>
            </div>
        </div>
        <div class="b-detail">
            <div class="containter clearfix">
                <div class="b-left">
                    <!-- 大图 -->
                    <div class="bigimg">
                        <!-- <img src="../img/shop/b-1.jpg" alt=""> -->
                        <span class="magnify"></span>
                        <i class="iconfont bo">&#xe624;</i>
                        <i class="iconfont se">&#xe62f;</i>
                        <span class="rightimg">&nbsp;</span>
                    </div>
                    <!-- 下面的小图 -->
                    <div class="s-img">
                        <ul class="clearfix">

                        </ul>
                    </div>
                    <p>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe60b;</i>
                            <span>收藏商品</span>
                        </a>
                        <span>（2524人气）</span>
                        <a href="javascript:;" class="fr jubao">举报</a>
                    </p>
                </div>
                <div class="b-de-center">
                    <div class="bc-title">
                        <h2>瑞士冠琴手表浪情海男士超薄防水精钢男表2019新款夜光机械石英表</h2>
                    </div>
                    <div class="bc-price">
                        <span>价格</span>
                        <i>￥</i>
                        <em>980.00</em>
                    </div>
                    <!-- 运费 -->
                    <div class="freight clearfix">
                        <span class="fl">运费</span>
                        <div class="city">
                            <span>杭州</span>
                            <i class="iconfont">&#xe87e;</i>
                        </div>
                    </div>
                    <ul class="appraise">
                        <li>
                            <span>累计评价</span>
                            <em>1198</em>
                        </li>
                        <li>
                            <span>送天猫积分</span>
                            <i>490</i>
                        </li>
                    </ul>
                    <div class="minibar">
                        <div class="btn-mini">
                            <div class="hui btn">
                                <div class="btn-logo">
                                    <img src="../img/shop/hui.png" alt="">
                                </div>
                                <div class="hui-sec">
                                    <span>查看更多同款:
                                        <em>¥</em>
                                    </span>

                                </div>
                            </div>
                            <div class="juan btn">
                                <div class="btn-logo">
                                    <img src="../img/shop/juan.png" alt="">
                                </div>
                                <div class="juan-sec">
                                    <em>￥</em>
                                    <span>限时好劵</span>
                                    <b>速领</b>
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div>
                                <img src="../img/shop/huo.png" alt="">
                                <a href="javascript:;"> 全场分期免息，大牌好物任你挑，最高...</a>
                            </div>
                            <div>
                                <img src="../img/shop/huo.png" alt="">
                                <a href="javascript:;">天猫超市日用百货100元</a>
                            </div>
                            <div>
                                <img src="../img/shop/cu.png" alt="">
                                <a href="javascript:;"> 天猫超市-休闲食品-领劵199减100</a>
                            </div>
                            <div class="cu">
                                <div>
                                    <img src="../img/shop/cu1.png" alt="">
                                    <a href="javascript:;"> 今日疯抢-翻牌抢0.01元好货</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="key">
                        <dl class="colorlist clearfix">
                            <dt>颜色分类</dt>
                            <dd>
                                <ul class="clearfix">
                                </ul>
                            </dd>
                        </dl>
                        <dl class="num clearfix">
                            <dt>数量</dt>
                            <dd>
                                <input type="number" value="1" maxlength="8" title="请输入购买量" min="1" max="10">
                                <span class="jian">件</span>
                                <span class="ku">库存
                                    <span class="kuNum">10</span>
                                    件</span>
                            </dd>
                        </dl>
                    </div>
                    <!-- 立即购买 购物车 -->
                    <div class="action-btn">
                        <button class="buy btn">立即购买</button>
                        <button class="addcar btn">
                            <i class="iconfont">&#xe64f;</i>
                            加入购物车
                        </button>
                    </div>
                    <!-- 服务承诺 -->
                    <div class="serPromise">
                        <dl>
                            <dt>服务承诺</dt>
                            <dd>
                                <ul class="clearfix">
                                    <li>
                                        <a href="javascript:;">意外保修</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">三包服务</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">正品保证</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">全面保修</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">延保服务</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">极速退款</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">退货运费险</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">七天无理由退换</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <div class="payWay">
                            <span>支付方式</span>
                            <i class="iconfont">&#xe87e;</i>
                            <div class="way">
                                <a href="javascript:;">
                                    <img src="../img/shop/way-1.png" alt="">
                                    <span>信用卡</span>
                                </a>
                                <a href="javascript:;">
                                    <img src="../img/shop/way-2.png" alt="">
                                    <span>快捷支付</span>
                                </a>
                                <a href="javascript:;">
                                    <img src="../img/shop/way-3.png" alt="">
                                    <span>蚂蚁花呗</span>
                                </a>
                                <a href="javascript:;">
                                    <img src="../img/shop/way-4.png" alt="">
                                    <span>余额宝</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="b-de-right">
                    <div class="dr-hd">
                        <s></s>
                        <span>看了又看</span>
                    </div>
                    <div class="dr-content">
                        <div>
                            <ul>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/b-1.jpg" alt="">
                                        <p>￥158.00</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/b-2.jpg" alt="">
                                        <p>￥427.00</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/b-5.jpg" alt="">
                                        <p>￥324.00</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/big-10.jpg" alt="">
                                        <p>￥158.00</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/big-1.jpg" alt="">
                                        <p>￥427.00</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="../img/shop/big-7.jpg" alt="">
                                        <p>￥324.00</p>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="dr-btn">
                        <i class="iconfont pre">&#xe609;</i>
                        <i class="iconfont next">&#xe87e;</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="shop-de">
        <h3>商品详情</h3>
    </div>
</body>

</html>